<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    flex弹性布局是由两条交叉轴来对页面进行布局的
        特性：
            1.使用弹性布局后，子元素display会变成block
            2.采用flex布局的元素，称为Flex容器，它的直接子元素叫做flex项目
            3.任何一个容器都可以设置为flex布局， display:flex
            4.当一个元素设置为flex布局后，该容器默认存在两根轴，水平的主轴，垂直的交叉轴
            5.默认情况主轴开始位置叫做，main start,相当于左对齐，
              结束位置叫main end，相当于右对齐
            6.默认情况交叉轴开始位置叫做，cross start ,相当于顶对齐，
              结束位置叫cross end，相当于底对齐
  -->
  
</body>
</html>